<template>
  <div class="page-container">
    <el-tabs v-model="activeName" @tab-click="changeHandle">
      <el-tab-pane :label="`全部(${total})`" :name="'1'" />
      <el-tab-pane :label="`待商家处理(${total})`" :name="'2'" />
      <el-tab-pane :label="`商家已拒绝退款(${total})`" :name="'3'" />
      <el-tab-pane :label="`待平台处理(${total})`" :name="'4'" />
      <el-tab-pane :label="`平台已拒绝退款(${total})`" :name="'5'" />
      <el-tab-pane :label="`退款成功(${total})`" :name="'6'" />
    </el-tabs>
    <pf-table
      ref="pfTable"
      v-model="form"
      :columns="columns"
      :form-items="formItems"
      @get-table-data="getTableData"
    >
      <template #handle="{row}">
        <el-button type="text" size="small" @click="showDetail(row)">详情</el-button>
      </template>
    </pf-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { PAY_METHOD, RETURN_TYPE } from '@/utils/enum'

export default {
  name: 'AfterSaleOrderList',
  components: {
  },
  data() {
    return {
      payMethodOptions: PAY_METHOD,
      returnTypeOptions: RETURN_TYPE,
      activeName: '1',
      form: {},
      total: 0,
      loading: false
    }
  },
  computed: {
    ...mapGetters([
      'currentEnterprise',
      'currentSite'
    ]),
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '退款单号', prop: 'account', attrs: { width: '100px', fixed: 'left' }},
        { label: '订单号', prop: 'roleName', attrs },
        { label: '退款类型', prop: 'userName', attrs },
        { label: '申请退款金额', prop: 'mobile', attrs },
        { label: '实际退款金额', prop: 'mobile', attrs },
        { label: '订单金额', prop: 'sexStr', attrs },
        { label: '退款申请人', prop: 'sexStr', attrs },
        { label: '支付方式', slot: 'statusStr', attrs },
        { label: '申请退款时间', slot: 'statusStr', attrs },
        { label: '退款状态', slot: 'statusStr', attrs: { width: '100px', fixed: 'right' }},
        { label: '操作', slot: 'handle', attrs: { width: '100px', fixed: 'right' }}
      ]
    },
    formItems() {
      const items = [
        {
          type: 'input',
          label: '订单编号',
          prop: 'roleName1'
        }, {
          type: 'select',
          label: '退款类型',
          prop: 'roleName2',
          options: this.returnTypeOptions
        }, {
          type: 'date',
          label: '退款申请时间',
          prop: 'dateRange',
          formItemAttrs: { labelWidth: '110px' },
          attrs: {
            type: 'datetimerange'
          }
        }, {
          type: 'select',
          label: '支付方式',
          prop: 'roleName4',
          options: this.payMethodOptions,
          attrs: {
            multiple: true
          }
        }
      ]
      if (this.activeName === '1') {
        items.push({
          type: 'select',
          label: '退款状态',
          prop: 'roleName3',
          options: this.payMethodOptions,
          attrs: {
            multiple: true
          }
        })
        return items
      } else {
        return items
      }
    }
  },

  methods: {

    changeHandle() {
      this.$refs.pfTable.getTableData()
    },

    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      const [createStartTime = '', createEndTime = ''] = formQuery?.dateRange || []
      const data = {
        pageNo,
        pageSize,
        createStartTime,
        createEndTime,
        enterpriseId: this.currentEnterprise.id,
        siteId: this.currentSite.id,
        ...formQuery
      }
      console.log(data)
      // getRoleList(data).then(res => {
      //   this.loading = false
      //   done({ data: res.data || [], total: res.count || 0 })
      // }).catch(() => {
      //   done({ data: [], total: 0 })
      //   this.loading = false
      // })
      done({ data: [1], total: 0 })
    },

    // 详情
    showDetail(row) {
      this.$router.push({
        path: '/order/afterSale/detail',
        query: {
          id: row.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
